<template>
	<view>
		<view class="bg">
			<image src="../../../../static/finishbg.png" mode="" class="img"></image>
			<view class="end">
				<text>距结束：3天12小时</text>
			</view>
			<text class="time">124次浏览</text>
			<text class="amount">五件拍品</text>
		</view>
		
		<!-- 书画专场 -->
		<view>
			<view class="special">
				<text>佳士得秋季拍卖中国书画专场</text>
				<image src="../../../../static/share.png" mode=""></image>
			</view>
			<view class="year">
				竞拍时间：2021.07.12 10:00-2021.07.31 10:00
			</view>
		</view>
		<!-- 竞拍列表 -->
   <view class="list">
	   <view class="paimai">
	   	<view>
	   		<image src="../../../../static/person.png" mode=""></image>
	   		<view class="state">
	   			<text>竞拍中</text>
	   		</view>
	   	</view>
	   	<view class="name">
	   		<text>吴昌硕《花卉册》</text>
	   	</view>
	   	<view class="price">
	   		<text>最高出价：1,200,000</text>
	   	</view>
	   </view>
		 
		 <view class="paimai">
		 	<view>
		 		<image src="../../../../static/person.png" mode=""></image>
		 		<view class="state">
		 			<text>竞拍中</text>
		 		</view>
		 	</view>
		 	<view class="name">
		 		<text>吴昌硕《花卉册》</text>
		 	</view>
		 	<view class="price">
		 		<text>最高出价：1,200,000</text>
		 	</view>
		 </view>
   </view>
	 
	 <view class="list">
	 	<view class="paimai">
	 		<view>
	 			<image src="../../../../static/person.png" mode=""></image>
	 			<view class="state">
	 				<text>竞拍中</text>
	 			</view>
	 		</view>
	 		<view class="name">
	 			<text>吴昌硕《花卉册》</text>
	 		</view>
	 		<view class="price">
	 			<text>最高出价：1,200,000</text>
	 		</view>
	 	</view>
	 	
	 	<view class="paimai">
	 		<view>
	 			<image src="../../../../static/person.png" mode=""></image>
	 			<view class="state">
	 				<text>竞拍中</text>
	 			</view>
	 		</view>
	 		<view class="name">
	 			<text>吴昌硕《花卉册》</text>
	 		</view>
	 		<view class="price">
	 			<text>最高出价：1,200,000</text>
	 		</view>
	 	</view>
	 </view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.bg{
		position: relative;
		width: 100%;
	}
	.bg .img{
		width: 100%;
		border-radius: 12rpx;
		height: 400rpx;
	}
	.bg .end {
		width: 280rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		text-align: center;
		background-color: #c6100e;
		color: #FFFFFF;
		border-radius: 0 100rpx 100rpx 0;
		position: absolute;
		left: 0;
		top: 15%;
	}
	.bg .time{
		font-size: 24rpx;
		position: absolute;
		left: 5%;
		bottom: 5%;
		color: #c6100e;
	}
	
	.bg .amount {
		font-size: 24rpx;
		position: absolute;
		right: 5%;
		bottom: 5%;
		color: red;
	}
	.special{
		position: relative;
	}
	
	.special text {
		font-weight: 700;
		margin-left: 20rpx ;
	}
	
	.special image{
		width: 30rpx;
		height: 30rpx;
    position: absolute;
		top: 10rpx;
		right: 30rpx;
	}
	.year {
		font-size: 24rpx;
		color: #939393;
		margin-left: 20rpx;
	}
	.list {
		display: flex;
		justify-content: space-between;
		width: 90%;
	}
	
	.paimai{
		position: relative;
		background-color: #fefffe;
		border-radius: 10rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		height: 480rpx;
		border-radius: 0 0 10rpx 10rpx;
	}
	
	.list image{
		width: 346rpx;
		height: 346rpx;
		border-radius: 10rpx 10rpx 0 0;
	}
	.state {
		width: 120rpx;	
		height: 40rpx;
		background-color: #c6100e;
		text-align: center;
		line-height: 40rpx;
	  color: #ffffff;
		font-size: 24rpx;
		border-radius: 100rpx 0 0 100rpx;
		position: absolute;
		right: 0;
		bottom: 160rpx;
		}
		.list .name {
			font-size: 28rpx;
			margin-left: 10rpx;
		}
		.list .price{
			font-size: 24rpx;
			color: #c6100e;
			margin-left: 10rpx;
		}
</style>
